<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>grid</title>
    <script src="./echarts.min.js"></script>
  </head>
  <body>
    <div style="width: 600px; height: 400px" id="echarts"></div>
  </body>
  <script>
    const myCharts = echarts.init(document.getElementById("echarts"));
    const data = [100, 80, 20, 10, 90, 70];
    const option = {
      grid: {
        show: true,
        borderWidth: 10,
        borderColor: "red",
        // top:120,
        // right:120,
        // width:500,
        // height:300
      },
      dataZoom: [
        {
          type: "slider",
          xAxisIndex:[0]
        },
        {
          type: "slider",
          yAxisIndex:[0]
        },
      ],
      toolbox: {
        show: true,
        feature: {
          dataZoom: {},
        },
      },
      xAxis: {
        type: "category",
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          type: "bar",
          data,
        },
      ],
    };
    myCharts.setOption(option);
  </script>
</html>
